import React from "react";
import "./morefood.css"
import { Link, useParams, useNavigate, useLocation } from "react-router-dom"
import { getNiceFood } from "../../api/home"
import { InfiniteScroll, List } from 'antd-mobile'

function Morefood() {
    let navigate = useNavigate();//链接跳转
    // 加载数据
    let [Num, editNum] = React.useState(9)
    let [flag, Editflag] = React.useState(false)
    let [page, setPage] = React.useState(null)

    // 页面数据
    let [niceFood, setNiceFood] = React.useState(null)
    React.useEffect(() => {
        getNiceFood(Num).then(data => {
            setNiceFood(data.data.data)
            setPage(data.data.total)
        })
    }, [])

    const goNewIp = (id, ids) => {
        if (id == 3) {
            navigate('/detailscourse/' + ids)
        } else {
            navigate('/detailsvideo/' + ids)
        }
    }
    return (
        <div className="morefood">
            <div className="top">
                <div className="left">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                </div>
                <div>精选美食</div>
                <div className="right">
                    <span className="iconfont icon-sort"></span>
                </div>
            </div>
            <div className="likeBox">
                <div className="goods-page">
                    <div className="box">
                        <ul>
                            {
                                niceFood && niceFood.map(item => {
                                    return (
                                        <li key={item.id} onClick={goNewIp.bind(this, item.type, item.id)}>
                                            <div className="img">
                                                <img src={item.image} />
                                            </div>
                                            <div className="text">

                                                <h6>{item.title}</h6>
                                                {
                                                    item.type != 1 ? (<span style={{ 'lineHeight': '50px', 'margin': 0 }}>上课人数: {item.play}</span>) : (<span>{item.description}</span>)
                                                }

                                                <div className={item.type != 1 ? 'label-play' : 'label-bar'}>
                                                    {
                                                        item.type != 1 ? (<a href="">
                                                            <span>1</span>
                                                            <span>2</span>
                                                            <span>3</span>
                                                            <span>4</span>
                                                            <span>5</span>
                                                            <span>...</span>
                                                        </a>) : (<>
                                                            {
                                                                item.tag && item.tag
                                                                .map(item => {
                                                                        return (<a href="" key={item.id}>
                                                                            <span>{item.name}</span>
                                                                        </a>)
                                                                    })
                                                            }
                                                        </>
                                                        )
                                                    }



                                                </div>
                                            </div>

                                        </li>
                                    )
                                })
                            }

                            {/* <li >
                                <div className="img">
                                    <img src="http://img.szzhangchu.com/1588856854255_6294486830.jpg@400w_400h_1e_1c.jpg" />
                                </div>
                                <div className="text">

                                    <h6>123123</h6>
                                    <span>123123</span>
                                    <div className="label-play">

                                        <a href="">
                                            <span>1</span>
                                            <span>1</span>
                                            <span>1</span>
                                            <span>1</span>
                                            <span>1</span>
                                            <span>...</span>
                                        </a>


                                    </div>
                                </div>

                            </li> */}



                        </ul>
                        <InfiniteScroll loadMore={async () => {
                        setTimeout(() => {
                            Editflag(true)

                        }, 2000)
                        // console.log(flag);
                        Num += 3
                        editNum(Num)
                        // console.log(Num);
                        await getNiceFood(Num).then(data => {
                            // console.log(data);
                            setNiceFood(data.data.data)

                        })
                        setTimeout(() => {
                            Editflag(false)

                        }, 2000)


                    }} hasMore={flag == false && Num < page}
                        threshold={50}
                    />
                    </div>
                </div>
            </div>

        </div>
    )
}

export default Morefood;